
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Building a UI with AsyncQueue</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
    #init {
        margin-top: 1em;
    }

    #demo .yui-module {
        position: relative;
        width: 28em;
    }
    #demo .yui-module .yui-hd,
    #demo .yui-module .yui-bd,
    #demo .yui-module .yui-ft {
        margin: 0;
        padding: 1ex 1em;
    }
    #demo .yui-module .yui-hd {
        background: #406ED9;
    }
    #demo .yui-module .yui-hd h4 {
        color: #fff;
        margin: 0;
    }
    #demo .yui-module .yui-bd {
        background: #ABCEFF;
        border-left: 1px solid #7A97BB;
        border-right: 1px solid #7A97BB;
        height: 5em;
        padding-top: 4.5em;
        position: relative;
        overflow: hidden;
        text-align: center;
    }
    #demo .yui-module .yui-ft {
        background: #fff;
        border: 1px solid #7A97BB;
        border-top-color: #ccc;
        padding-right: 25px;
    }
    #demo .yui-module .yui-status {
        margin: 0;
        padding: 0 25px 0 0;
        height: 1.3em;
    }
    #demo .yui-module .yui-nav {
        background: #fff;
        border-bottom: 1px solid #ccc;
        left: 0;
        padding: .5em;
        position: absolute;
        width: 27em;
    }
    #demo .yui-module .yui-nav ul,
    #demo .yui-module .yui-nav li {
        display: inline;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #demo .yui-module .yui-nav a {
        color: #ffa928;
        padding: 0 1.1em;
    }
    #demo .yui-module .working {
        background: #fff url(http://l.yimg.com/a/i/nt/ic/ut/bsc/busyarr_1.gif) no-repeat 26em 50%;
    }
</style>

<!--end custom header content for this example-->

</head>

<body class=" yui-skin-sam">

<h1>Building a UI with AsyncQueue</h1>

<div class="exampleIntro">
	<p>This example illustrates how to break up the initial rendering of an application UI into queued code chunks, yielding back to the browser regularly to draw portions of the UI as they are ready.</p>
<p><em>Note</em>: This method is mostly useful for apps constructing complex DOM structures.  While the DOM structure contained in this example is not complex, some artificial delays were injected to simulate process intensive operations that would normally cause such delays.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="demo">
    <p>The module will be inserted here.  <em>Click the button below</em>.</p>
</div>

<button id="init">Initialize Application</button>

<script type="text/javascript">
YUI({base:"../../build/", timeout: 10000}).use("anim", "queue",function (Y) {

var MyApp = {
    NAME : 'Asynchronous Queue Demo',

    q : new Y.AsyncQueue(),

    nodes : {
        root    : null,
        status  : null,
        nav     : null,
        content : null,
        foot    : null
    },

    render : function (container) {
        if (MyApp.nodes.root) {
            MyApp.q.stop();

            MyApp.q.add(
                MyApp.destroy
            );
        }

        // artificial delays have been inserted to simulate _renderNav or
        // _renderContent being process intensive and taking a while to complete
        MyApp.q.add(
            // pass the container param to the callback using Y.bind
            Y.bind(MyApp._renderFramework, MyApp, container),
            {fn: function () {}, timeout: 700}, // artificial delay
            MyApp._renderNav,
            {fn: function () {}, timeout: 700}, // artificial delay
            MyApp._renderContent).run();
    },

    destroy : function () {
        var root = MyApp.nodes.root;

        if (root) {
            Y.Event.purgeElement(root,true);
            root.set('innerHTML','');
        }
    },

    setStatus : function (message,working) {
        MyApp.nodes.status.set('innerHTML',message);

        MyApp.nodes.foot[working?'addClass':'removeClass']('working');
    },

    _renderFramework : function (container) {
        var root = MyApp.nodes.root = Y.get(container);

        root.set('innerHTML',
        '<div class="yui-module">'+
            '<div class="yui-hd">'+
                '<h4>'+MyApp.NAME+'</h4>'+
            '</div>'+
            '<div class="yui-bd">'+
                '<div class="yui-nav"></div>'+
                '<div class="yui-content"></div>'+
            '</div>'+
            '<div class="yui-ft">'+
                '<p class="yui-status"></p>'+
            '</div>'+
        '</div>');

        MyApp.nodes.status  = root.query('p.yui-status');
        MyApp.nodes.nav     = root.query('.yui-nav');
        MyApp.nodes.content = root.query('.yui-content');
        MyApp.nodes.foot    = root.query('.yui-ft');

        MyApp.nodes.nav.setStyle('top','-30px');
        MyApp.nodes.content.setStyle('opacity',0);

        MyApp.setStatus('Loading...',true);
    },

    _renderNav : function () {
        var nav = MyApp.nodes.nav;
        nav.appendChild(Y.Node.create(
            '<ul>'+
                '<li><a href="#">Nav Lorem</a></li>'+
                '<li><a href="#">Nav Ipsum</a></li>'+
                '<li><a href="#">Nav Dolor</a></li>'+
                '<li><a href="#">Nav Sit</a></li>'+
            '</ul>'));

        new Y.Anim({
            node : nav,
            to :   { top : 0 },
            duration : .3
        }).run();
    },

    _renderContent : function () {
        var content = MyApp.nodes.content;

        content.appendChild(Y.Node.create(
            '<p>[ App content here ]</p>'));

        new Y.Anim({
            node : content,
            to :   { opacity : 1 },
            duration : .8
        }).run();

        MyApp.setStatus('App initialized',false);
    }
};

Y.get('#init').on('click',function (e) {
    e.preventDefault();
    this.set('innerHTML','Re-initialize Application');

    MyApp.render('#demo');
});

// expose the example structure
YUI.example = { MyApp : MyApp };

});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
